<template>
<!-- 绑定ref拿到整个元素 这样就用用区分到底拿那个类名为Wrapper  -->
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 这种导入所有插件都能用 不需要一个一个导入
import BScroll from 'better-scroll'
export default {
  props: {
    probeType: {
      type: Number,
      default () {
        return 0
      }
    },
    pullUpLoad: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      bscroll: null // 这个属性在父组件也要有名字
    }
  },
  mounted () {
    this.bscroll = new BScroll(this.$refs.wrapper, {
      probeType: this.probeType, // 开启实时监听 如果不用就会影响性能 不能固定设置为3  所以需要动态 传入
      click: true,
      pullUpLoad: this.pullUpLoad
    })
    this.bscroll.on('scroll', (res) => {
      if (this.probeType === 2 || this.probeType === 3) { // 优化
      // console.log(res.y)
      // 可以$emit发送出去 可以用$ref拿不到实时数据
        this.$emit('getScrollY', res.y)
      }
    })
    this.bscroll.on('pullingUp', () => {
      // 把事件传出去 让外面执行这个事件处理下面
      this.$emit('pullingUp')
      // console.log('上拉加载更多')
      // 发送网络请求，请求更多页的数据
      // 等数据请求完成，并且将新的数据展示出来
      // 为了防止一直刷新
      setTimeout(() => {
        // 调用这个方法的时候才会一直刷新 所以需要节流
        this.finishPullUp()
      }, 2000)
      // this.bscroll.closePullUp()关闭刷新
    })
  },
  methods: {
    // this.bscroll.refresh()外面调用了// 解决bug-刷新-重新计算可滚动高度 解决图片以上来没有占位置引起的问题
    // 这里面的方法和上面data外面的$ref才能拿到
    refresh () {
      this.bscroll && this.bscroll.refresh()
    },
    finishPullUp () { // 封装一层
      this.bscroll && this.bscroll.finishPullUp()
    },
    getScrollY () { // 封装一层
      return this.bscroll ? this.bscroll.y : 0
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
